// createRouter:作用是创建路由实例
// createWebHistory:作用是创建histroy模式下的路由
import { createRouter, createWebHistory } from 'vue-router'
import Layout from '@/views/Layout/index.vue'
import About from '@/views/About/index.vue'
import NotFound from '@/views/NotFound/index.vue'
import Login from '@/views/Login/index.vue'
import home from '@/views/home/index.vue'
import goods from '@/views/goods/index.vue'
import category from '@/views/category/index.vue'

// 通用路由(所有用户共享)
const routes = [
  {
    path: '/',
    name: 'admin',
    component: Layout
  },
  {
    // about页面
    path: '/about',
    name: '/about',
    component: About
  },
  {
    // 捕获404页面路由为固定写法
    path: '/:pathMatch(.*)*',
    name: '/:pathMatch(.*)*',
    component: NotFound
  },
  {
    path: '/login',
    name: '/login',
    component: Login,
    meta: {
      title: '登录页'
    }
  }
]

// 动态路由，用于匹配菜单动态添加路由
const ayscRoutes = [
  // 后台主页组件（路径path设置为 "",即为当路径 为"/",Home组件也可在主页中展示）
  {
    path: '/',
    component: home,
    //为路由设置标题
    meta: {
      title: '后台首页'
    }
  },
  {
    path: '/goods/list',
    component: goods,
    //为路由设置标题
    meta: {
      title: '菜单列表'
    }
  },
  {
    path: '/category/list',
    component: category,
    meta: {
      title: '分类管理'
    }
  }
]

// 1. 创建路由实例
export const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  //2. 配置一些路由
  // 每个路由都需要映射到一个组件
  // path和component对应关系的位置
  routes
})

// 创建完路由之后，定义动态添加路由的方法，并且将此方法暴露出去
export const addRoutes = (menus) => {
  // 是否有新的路由
  let hasNewRoute = false
  // 使用递归思想一层层将路由和菜单项进行匹配，从而向路由中注册路由
  const findAndAddRouteByMenus = (arr) => {
    arr.forEach((e) => {
      // e代表数据arr中每个菜单项
      let item = ayscRoutes.find((o) => {
        return o.path == e.frontpath
      })
      // item.name代表路由的名字 hasRoute()方法判断router中是否有此路由
      if (item && !router.hasRoute(item.name)) {
        // 添加admin路由的子路由，因此这里涉及到添加嵌套路由的知识点
        router.addRoute('admin', item)
        // 一旦添加了新的路由，就将hasNewRoute的值置为true
        hasNewRoute = true
      }
      //检查item中是否有child子列表存在
      if (e.child && e.child.length > 0) {
        findAndAddRouteByMenus(e.child)
      }
    })
  }

  //调用嵌套的方法
  findAndAddRouteByMenus(menus);
  return hasNewRoute;
}
